<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Temperate 
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20121205

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My Tracker</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css' />
<link href="../css/iphone.css" rel="stylesheet" type="text/css" media="all" />

<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- For google map api and style -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- <meta http-equiv="refresh" content="30;url=index.html" /> -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAR33uUSrW-Nc3NWqPUZV30Anh1DOS9oto&sensor=false" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>
<style>
.labels {
     color: white;
     background-color: #0172b6;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     width: 25px;
     border: 1px solid black;
     
</style>
<script>
window.addEventListener("load",function() {
	  // Set a timeout...
	  setTimeout(function(){
	    // Hide the address bar!
	    window.scrollTo(0, 1);
	  }, 0);
	});
</script>
<script>
window.addEventListener("orientationchange", function() {
	  // Announce the new orientation number
	$("#test1").height($(window).height() - ($("#test1").offset().top + ($("#test1").outerHeight(true) - $("#test1").height())));
	}, false);

</script>
<script>
var div;


function initialize() {

	$("#test1").height($(window).height() - ($("#test1").offset().top + ($("#test1").outerHeight(true) - $("#test1").height())));

	geocoder = new google.maps.Geocoder();

	//get json starts here
	$.getJSON('./admindata?type=1', function(data) {
		var hlbl=1;
		$.each(data.aaData, function(i, id) {
			//adding markers start here
			var latLng = new google.maps.LatLng(id.lat, id.lng);
			
			//show info window
			//create map
			var mapOptions = {
		zoom : 12,
		center:new google.maps.LatLng(id.lat, id.lng),
		mapTypeId : google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("test1"), mapOptions); 
			//end map
			geocoder.geocode({'latLng':latLng}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					if (results[1]) {
						marker.info = new google.maps.InfoWindow({
							content : results[1].formatted_address + "<p>Latitude: " + parseFloat((id.lat).toFixed(3)) + ",Longitude: " +parseFloat((id.lng).toFixed(3))+"</p> <br> " + id.dateTime
						});
					} else {
						marker.info = new google.maps.InfoWindow({
							content :  "Latitude: " + parseFloat((id.lat).toFixed(3)) + ",Longitude: " +parseFloat((id.lng).toFixed(3))+ " <br> " + id.dateTime
							
						});							
					}
				} else {
					marker.info = new google.maps.InfoWindow({
						content :  "Latitude: " + parseFloat((id.lat).toFixed(3)) + ",Longitude: " +parseFloat((id.lng).toFixed(3))+ " <br> " + id.dateTime
						
					});						
				}
			});
			 var marker = new MarkerWithLabel({
        map: map,
        position: latLng,
        icon: "../images/bluemarker5.png",
        labelContent:hlbl,
        labelAnchor: new google.maps.Point(12, 55),
        labelClass: "labels",
        visible: false
    });
			 
			
		//	 google.maps.event.addListener(marker, 'mouseover', function() {
				
			//		marker.info.open(map, marker);
			//	});
			 
			 google.maps.event.addListener(marker, 'click', function() {
					
					marker.info.open(map, marker);
				});
			 
			 
//get json ends here 
			
		});
		
	});
	
	showHistory();
}


function showHistory(){
	
	geocoder = new google.maps.Geocoder();
	//get json starts here
	$.getJSON('./admindata?type=50', function(data) {
		var hlbl=1;
		var num=2;
		$.each(data.aaData, function(i, id) {
			//adding markers start here
			var latLng = new google.maps.LatLng(id.lat, id.lng);
			/* var marker = new google.maps.Marker({
				position : latLng,
				map : map,
				icon : '../images/bluemarker5.png'

			});
			//adding markers ends here */
			 var marker = new MarkerWithLabel({
        map: map,
        position: latLng,
        icon: "../images/marker"+ (num++) +".png",
        labelContent:hlbl++,
        labelAnchor: new google.maps.Point(12, 45),
        labelClass: "labels"
    });
			//adding markers ends here

			//show info window
			
			geocoder.geocode({'latLng':latLng}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					if (results[1]) {
						marker.info = new google.maps.InfoWindow({
							content : results[1].formatted_address + "<p>Latitude: " + parseFloat((id.lat).toFixed(3)) + ",Longitude: " +parseFloat((id.lng).toFixed(3))+"</p> <br> " + id.dateTime
						});
					} else {
						marker.info = new google.maps.InfoWindow({
							content :  "Latitude: " + parseFloat((id.lat).toFixed(3)) + ",Longitude: " +parseFloat((id.lng).toFixed(3))+ " <br> " + id.dateTime
						});							
					}
				} else {
					marker.info = new google.maps.InfoWindow({
						content :  "Latitude: " + parseFloat((id.lat).toFixed(3)) + ",Longitude: " +parseFloat((id.lng).toFixed(3))+ " <br> " + id.dateTime
						
					});						
				}
			});
			
			google.maps.event.addListener(marker, 'click', function() {
				
				marker.info.open(map, marker);
			
			});
			
		});

	});
	//get json ends here */


}


</script>
    
</head>
<body onload="initialize();">
<div id="content">
<div id="test1" class="gmap3"></div>
</div>
<div id="footer">
	<p align ="center">Copyright (c) by Nanyang Polytechnic.</p>
</div>
</body>
</html>
